<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-show="headerShow">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="入库单号" v-if="activeNme == '1'" prop="stockInCode">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.stockInCode"
            />
          </a-form-item>

          <a-form-item label="客户名称" prop="customName">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.customName"
            />
          </a-form-item>

          <a-form-item label="织布单号" prop="planOrderCode">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.planOrderCode"
            />
          </a-form-item>

          <a-form-item label="坯布编号" v-if="activeNme == '1'" prop="greyCode">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.greyCode"
            />
          </a-form-item>

          <a-form-item label="日期" prop="beginDate">
            <!-- <el-date-picker
            type="date"
            placeholder="选择开始日期"
            v-model="query.beginDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          /> -->
            <a-date-picker
              popup-container="html"
              v-model="query.beginDate"
              :style="{ width: '230px' }"
              placeholder="选择开始日期"
              class="bacClass"
            />
          </a-form-item>

          <a-form-item label="至" prop="endDate">
            <!-- <el-date-picker
            type="date"
            placeholder="选择结束日期"
            v-model="query.endDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          /> -->
            <a-date-picker
              popup-container="html"
              v-model="query.endDate"
              :style="{ width: '240px' }"
              placeholder="选择开始日期"
              class="bacClass"
            />
          </a-form-item>

          <CorporateSectorCascader
            v-if="activeNme == '1'"
            :configCascader="configCascader2"
            @changeCascader="changeCascader2"
          />

          <a-form-item label="仓库" v-if="activeNme == '1'">
            <a-select
              popup-container="html"
              class="bacClass"
              :style="{ width: '225px' }"
              v-model="query.warehouseName"
              :disabled="query.companyId == ''"
              allow-clear
            >
              <a-option
                v-for="item in pageData.inShelveList2"
                :key="item.id"
                :value="item.warehouseName"
              >
                {{ item.warehouseName }}
              </a-option>
            </a-select>
            <!-- <el-select
            v-model="query.warehouseName"
            @focus="focusShelve2"
            filterable
            placeholder="选择仓库"
            :disabled="query.companyName"
          >
            <el-option
              v-for="item in pageData.inShelveList"
              :key="item.id"
              :label="item.warehouseName"
              :value="item"
              :loading="pageData.loading"
            />
          </el-select> -->
          </a-form-item>
        </a-form>
        <div class="my-tool-bar" style="margin-bottom: 5px">
          <a-space>
            <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
            <el-button v-if="activeNme == '2'" @click="splitAdjustment()">入库</el-button>
            <el-button v-if="activeNme == '1'" @click="audit()" :icon="EditPen">审核</el-button>
          </a-space>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs :lazy-load="true" @change="activeChange" justify :default-active-key="activeNme">
        <a-tab-pane title="待处理" key="2">
          <div style="width: 100%; height: 100%">
            <encapsulation-agrid
              ref="refgridOption1"
              :configaggrid="configaggrid1"
            ></encapsulation-agrid>
          </div>
        </a-tab-pane>
        <a-tab-pane title="已处理" key="1">
          <div style="width: 100%; height: 100%">
            <encapsulation-agrid
              ref="refgridOption"
              :configaggrid="configaggrid"
            ></encapsulation-agrid>
          </div>
        </a-tab-pane>
      </a-tabs>
    </template>
    <el-dialog style="width: 500px" v-model="pageData.dialogFormVisible" v-loading="loadingElplus">
      <el-form :model="form">
        <el-form-item label="入库类型" prop="stockInType" label-width="80px">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="form.stockInType"
            style="width: 200px"
            disabled
          />
        </el-form-item>
        <el-form-item label="仓库:" label-width="80px">
          <el-select
            v-model="form.warehouseId"
            @focus="focusShelve"
            filterable
            placeholder="选择仓库"
          >
            <el-option
              v-for="item in pageData.inShelveList"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.id"
              :loading="pageData.loading"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="布笼:" label-width="80px">
          <el-select
            v-model="form.shelveId"
            @focus="focusShelve1"
            filterable
            placeholder="选择布笼"
            :disabled="!form.warehouseId"
          >
            <el-option
              v-for="item in pageData.inShelveList1"
              :key="item.shelveId"
              :label="item.shelveName"
              :value="item.shelveId"
              :loading="pageData.loading"
            />
          </el-select>
        </el-form-item>
        <!-- <el-select
              v-model="form.inShelveId"
              @focus="focusShelve"
              filterable
              placeholder="选择调整布笼"
            >
              <el-option
                v-for="item in pageData.inShelveList"
                :key="item.id"
                :label="item.shelveName"
                :value="item.id"
                :loading="pageData.loading"
              />
            </el-select> -->

        <!-- <el-form-item label="入库类型:" label-width="80px">
            <el-select
              v-model="form.stockInType"
              @focus="focusShelve3"
              filterable
              placeholder="选择入库类型"
              :disabled="!form.warehouseId"
            >
              <el-option
                v-for="item in pageData.inShelveList3"
                :key="item.id"
                :label="item.shelveName"
                :value="item.id"
                :loading="pageData.loading"
              />
            </el-select>
          </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="pageData.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <a-drawer
      cancel-text="关闭"
      popup-container=".arco-tabs-content"
      height="80vh"
      placement="bottom"
      :visible="pageData.showAdd"
      unmountOnClose
      @cancel="pageData.showAdd = false"
      :mask-closable="false"
    >
      <template #title> 详情 </template>
      <div style="width: 100%; height: 100%">
        <encapsulation-agrid
          ref="refgridOption2"
          :configaggrid="configaggrid2"
        ></encapsulation-agrid>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  // 引入element提示
  import { ElMessage, ElMessageBox } from 'element-plus'
  //引入封装post
  import { post } from '@/api/http'
  import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
  import { tableColumns, tableColumns1, tableColumns2 } from './ClothWarehouseIntoStorage'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  import dayjs from 'dayjs'
  import { Search, EditPen } from '@element-plus/icons-vue'
  interface Pagein {
    btnList: any
    dataList: any
    dialogFormVisible: boolean
    pageType: string
    showAdd: boolean
    loading: boolean
    inShelveList: any
    inShelveList1: any
    inShelveList2: any
    inShelveList3: any
  }

  // 跟请求参数无关的放这里
  let pageData = reactive<Pagein>({
    btnList: ['查询', '导出'], // 按钮列表
    dataList: [],
    dialogFormVisible: false,
    pageType: '',
    showAdd: false,
    loading: false,
    inShelveList: [],
    inShelveList1: [],
    inShelveList2: [],
    inShelveList3: [],
  })
  let oneDayTime: any = ref(dayjs().format('YYYY-MM-DD'))
  interface Querin {
    planOrderCode: Number | String
    customOrderNo: Number | String
    greyCode: Number | String
    customName: Number | String
    stockInCode: Number | String
    endDate: string
    beginDate: string
    warehouseName: string
    // companyName: string
    companyId: Number | String
    warehouseTypeName: String
    stockState: Number | String
    stockInTypeId: Number | String
    stockInType: Number | String
    completeState: Number | String
  }
  const form = ref<any>({})
  //getlist初始化接口参数
  let query = reactive<Querin>({
    customName: '',
    planOrderCode: '',
    customOrderNo: '',
    greyCode: '',
    stockInCode: '',
    endDate: dayjs().format('YYYY-MM-DD'),
    beginDate: dayjs().format('YYYY-MM-DD'),
    warehouseName: '',
    // companyName: '',
    companyId: '',
    warehouseTypeName: '',
    stockInTypeId: 26,
    stockState: '',
    stockInType: '',
    completeState: 4,
  })
  const headerShow = ref(true)
  //tabs选中的值
  let activeNme = ref<string>('2')
  // loding.....
  let loadingElplus = ref<boolean>(false)

  const activeChange = (val: any) => {
    query.customName = ''
    query.planOrderCode = ''
    query.customOrderNo = ''
    query.greyCode = ''
    query.stockInCode = ''
    query.endDate = ''
    query.beginDate = ''
    // query.companyName = ''
    query.warehouseName = ''
    query.companyId = ''
    activeNme.value = val
    getList()
  }
  const changeCascader2 = (data: any) => {
    const { corporateId, corporateLabel } = data
    // query.companyName = corporateLabel
    query.companyId = corporateId
    focusShelve2()
  }
  const configCascader2 = ref<{}>({
    corporateWidth: '230px', //公司宽度
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
  })
  const selsetionList = ref<any>([])
  const splitAdjustment = () => {
    let selsetionList1 = refgridOption1.value.getSelectedRows()
    if (selsetionList1.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    let condition = selsetionList1.every(
      (item: any) => item.customName === selsetionList1[0].customName
    )
    if (!condition) {
      ElMessage.warning('请选择客户名称相同的单据')
      return
    }
    form.value.companyId = ''
    form.value.warehouseId = ''
    form.value.shelveId = ''
    form.value.stockInType = '织造入次'
    form.value.stockInTypeId = 26
    //   form.value = selsetionList[0]
    selsetionList.value = selsetionList1
    pageData.dialogFormVisible = true
  }
  let refgridOption = ref<any>()
  let refgridOption1 = ref<any>()
  let configaggrid = ref({
    url: 'wms/GreyStockIn/getPage', //接口路径
    queryData: {
      //接口参数
      customName: query.customName,
      planOrderCode: query.planOrderCode,
      customOrderNo: query.customOrderNo,
      greyCode: query.greyCode,
      stockInCode: query.stockInCode,
      beginDate: query.beginDate,
      endDate: query.endDate,
      warehouseTypeName: '次布仓',
      stockInTypeId: 26,
      stockInType: '织造入次',
      completeState: 4,
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns,
    fileName: 'secondaryDistributionWarehouseIntoStorage-1',
    bottomTotal: true, //开启底部汇总
    bottomTotalConfig: ['weight'], //底部汇总列配置
  })
  let configaggrid1 = ref({
    url: '/wms/GreyStockIn/getStockInDataLink', //接口路径
    queryData: {
      //接口参数
      customName: query.customName,
      planOrderCode: query.planOrderCode,
      warehouseTypeName: '次布仓',
      completeState: 4,
      beginDate: query.beginDate,
      endDate: query.endDate,
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: true, //点击行是否多选
    //   checkboxShow: true,
    column: tableColumns1,
    fileName: 'secondaryDistributionWarehouseIntoStorage-2',
    bottomTotal: true, //开启底部汇总
    bottomTotalConfig: ['weight'], //底部汇总列配置
  })
  let configaggrid2 = ref({
    url: 'wms/GreyStockIn/getPage', //接口路径
    queryData: {
      //接口参数
      customName: query.customName,
      planOrderCode: query.planOrderCode,
      warehouseTypeName: '次布仓',
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: false, //点击行是否多选
    column: tableColumns2,
  })
  const save = async () => {
    if (!form.value.warehouseId) {
      ElMessage.error('请选择您的仓库')
      return
    }
    if (!form.value.shelveId) {
      ElMessage.error('请选择您的布笼')
      return
    }
    let parData = selsetionList.value.reduce((pre: any, cur: any) => {
      return pre.concat({
        companyId: cur.companyId,
        warehouseId: form.value.warehouseId,
        shelveId: form.value.shelveId,
        stockInType: form.value.stockInType,
        stockInTypeId: form.value.stockInTypeId,
        areaId: cur.areaId,
        clothfiyId: cur.clothfiyId,
        greyCode: cur.greyCode,
        greyName: cur.greyName,
        greyBatchNo: cur.greyBatchNo,
        planOrderCode: cur.planOrderCode,
        clothfiyCode: cur.clothfiyCode,
        weight: cur.weight,
        horseNo: cur.horseNo,
        machineCode: cur.machineCode,
        parentId: cur.id,
        yarnBatch: cur.yarnBatch,
        customName: cur.customName,
        grade: cur.grade,
        customOrderCode: cur.customOrderCode,
        machineGreyCode: cur.machineGreyCode,
      })
    }, [])
    try {
      loadingElplus.value = true
      let { code, message } = await post({
        url: 'wms/GreyStockIn/insertList',
        data: parData,
      })
      if (code == 200) {
        loadingElplus.value = false
        getList()
        pageData.dialogFormVisible = false
        ElMessage.success('入库成功')
        return
      }
      ElMessage.error(message)
    } finally {
      loadingElplus.value = false
    }
  }
  const audit = async () => {
    let selsetionList = refgridOption.value.getSelectedRows()
    if (selsetionList.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    ElMessageBox.confirm('确认通过审核吗?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info',
    })
      .then(async () => {
        let parData = selsetionList.reduce((pre: any, cur: any) => {
          return pre.concat(cur.id)
        }, [])
        try {
          loadingElplus.value = true
          let { code, message } = await post({
            url: 'wms/GreyStockIn/setAudit',
            data: { ids: parData, auditState: 1 },
          })
          if (code == 200) {
            loadingElplus.value = false
            ElMessage.success('审核成功')
            getList()
            return
          }
          ElMessage.error(message)
        } finally {
          loadingElplus.value = false
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功',
        })
      })
  }
  const focusShelve = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouse/getWarehouseByPara ',
        data: {
          firmId: selsetionList.value[0].companyId,
          warehouseTypeName: '次布仓',
          virtuallyState: 0,
        },
      })
      if (code == 200) {
        pageData.inShelveList = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }

  const focusShelve2 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouse/getWarehouseByPara',
        data: { firmId: query.companyId, warehouseTypeName: '次布仓', virtuallyState: 0 },
      })
      if (code == 200) {
        pageData.inShelveList2 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const focusShelve1 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/shelve/getShelveOption',
        data: { warehouseId: form.value.warehouseId },
      })
      if (code == 200) {
        pageData.inShelveList1 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const focusShelve3 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/shelve/getShelveByPara ',
        data: { warehouseId: form.value.warehouseId },
      })
      if (code == 200) {
        pageData.inShelveList3 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  //获取数据
  const getList = async () => {
    console.log(activeNme.value)
    if (activeNme.value == '1') {
      query.stockState = 0
      query.stockInTypeId = ''
      query.stockInType = ''
      query.warehouseTypeName = '次布仓'
      nextTick(() => {
        refgridOption.value.setQuery(query)
      })
    }
    if (activeNme.value == '2') {
      query.stockState = ''
      query.stockInTypeId = 26
      // query.stockInType = ''
      nextTick(() => {
        refgridOption1.value.setQuery(query)
      })
    }
  }

  //初始化
  onMounted(() => {
    getList()
  })
</script>
<script lang="ts">
  export default defineComponent({
    name: 'ClothWarehouseIntoStorage',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
